<template>
<div class="details flex-box-div ">
    <div class="my-swip">
        <van-swipe class="my-swipe" :autoplay="5000" :duration="1000" indicator-color="white">
            <van-swipe-item @click="preview" v-for="(item, index) in imgList" :key="index">
                <div class="img-box">
                    <img :src="item" alt="">
                </div>
            </van-swipe-item>
            
        </van-swipe>
    </div>
	
    <div class="plr text-left bgc-white mt10">
        <div class="header height-50 text-left flex-center-space-between">
            <div class="flex">
                <div class="mr10" style="white-space: pre;">
                    <van-tag type="danger" plain>{{merchant.ltd_level_name}}</van-tag>
                </div>
                <span class="blod ellipsis-2">{{detail.name}}</span>
            </div>

            <div class="pr10">
                <van-icon name="star-o" color="#666" size="0.7rem" @click="Coll(1)" v-if="detail.is_coll === 0" />
                <van-icon name="star" color="#ff9632" size="0.7rem"  @click="Coll(0)" v-else />
            </div>
        </div>
        <p style="color: #FE320D;" class="fz-12 mb10">下单前，请务必向商家咨询商品库存及开票情况</p>
        <div class="goods-msg">
            <ul class="goods_sku fz-12">
                <li>
                    <span>供应价格：</span> <span class="price" v-if="token">{{detail.price}}</span><span class="price" v-else>认证会员可见</span>
					
					
                </li>
                <li>
                    <span>物流运费：</span> <span class="">{{detail.freight_money}}</span>
                </li>
                <li class="flex-center-start">
                    <span class="mr20">型号：</span> 
                    <div class="flex-center-start">
                        <div class="sku_item" :class="{active: suk_id === index}" v-for="(item, index) in detail.sku_price" :key="item.id" @click="suk_id = index">
                            {{ item.name }}
                        </div>
                        <!-- <div class="sku_item" :class="{active: activeIndex === 1}">
                            200ml
                        </div> -->
                    </div>
                </li>
                <li>
                    <span>品牌：</span> <span>{{detail.brand_name}}</span>
                </li>
                <!-- <li class="flex-center-start">
                    <span>优惠券：</span> 
                    <div class="flex-center-start">
                        <div class="coupon">满2000减200</div>
                    </div>
                </li> -->
                <li>
                    <span>库存数量：</span> {{detail.stock}}套
                </li>
            </ul>
        </div>
    </div>

    <div class="plr bgc-white shop mt12 mb12">
        <div class="flex-center text-left pt10 pb10">
            <!-- <img :src="merchant.logo" alt="" class="height-63 width-63"> -->
            <van-image
                class="height-63 width-63"
                fit="contain"
                :src="merchant.logo"
                lazy-load
            />
            <div class="pl10 flex-column-space-between flex-1">
                <p class="ellipsis-2">{{merchant.name}}</p>
                <div class="flex-center-space-between mt10">
                    <van-tag>{{merchant.ltd_level_name}}</van-tag>
                    <van-button type="warning" size="mini" @click="merchant.id ? $router.push(`/shop?id=${merchant.id}`) : ''">进店逛逛</van-button>
                </div>
            </div>
        </div>
    </div>

    <div class="plr mt12 bgc-white">
        <van-divider>商铺详情</van-divider>

        <div class="border">
            <div class="height40 fz-12 head">
                商品规格
            </div>
            <div class="flex-wrap grey text-left fz-12">
                <div class="width50 mb2 mt6 pl10">商品品牌：{{detail.brand_name}}</div>
                
                <div class="width100 mb2 mt6 pl10">商品型号：{{detail.level_name}}</div>
                <div class="width50 mb2 mt6 pl10">商品内径：{{detail.internal_name}}</div>
                <div class="width50 mb2 mt6 pl10">商品外径：{{detail.external_name}}</div>
                <div class="width50 mb2 mt6 pl10">商品重量：{{detail.weight}}</div>
                <div class="width50 mb2 mt6 pl10">商品厚度：{{detail.thickness_name}}</div>
            </div>
        </div>
        <div class="border mt10">
            <div class="height40 fz-12 head">
                
				<div v-html="detail.content" > </div>
            </div>
            <div class="text-left">
            </div>
        </div>
        <van-divider>已经到底了</van-divider>
    </div>

    <van-goods-action>
        <!-- <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" /> -->
        <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/cart'); show = true" />
        <van-goods-action-icon icon="shop-o" text="店铺" @click="$router.push(`/shop?id=${merchant.id}`)" />
        <van-goods-action-button color="#f28002" type="warning" text="加入购物车" @click="show = true" />
        <van-goods-action-button color="#d8251d" type="danger" text="立即购买" @click="show = true" />
    </van-goods-action>

    <van-popup
        v-model="show"
        closeable
        close-icon="close"
        position="bottom"
        :style="{ height: '40%' }"
    >
        <div class="mt10">
            <div class="shop-box-data flex-1 flex-center pl10 pr20">
                <img :src="detail.cover_img" alt="" width="105" height="102" style="object-fit: contain">
                <div class="msg flex-1 text-left pl15">
                    <div class=" blod name van-multi-ellipsis--l2 fz-12">
                        {{detail.name}}
                    </div>
                    <div class="price fz-16 blod mt4">
                        ￥{{ isSku ? sku_price[suk_id].price : detail.price }}
                    </div>
                    <div class="text-gray fz-12 flex-center-space-between mt4">
                        <div class="padd">
                            库存数量：{{ isSku ? sku_price[suk_id].stock : detail.stock }}套
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="text-left p20">
            <van-stepper v-model="count" integer input-width="1rem" min="1" :max="isSku ? sku_price[suk_id].stock : detail.stock" />
        </div>
        <van-goods-action>
            <van-goods-action-button color="#f28002" type="warning" text="加入购物车" @click="addCart" />
            <span></span>
            <van-goods-action-button color="#d8251d" type="danger" text="立即购买" @click="buy" />
        </van-goods-action>
    </van-popup>
</div>
</template>

<script>
import { ImagePreview } from 'vant';
export default {
    data () {
        return {
            count: 1, // 数量
            suk_id: 0,
            sku_price: [],
			goods_id:0,
			detail:'',
			imgList: [],
			merchant:'',
			token: this.$store.getters['user/userinfo'].token,

            show: false
        }
    },
    computed: {
        isSku () {
            return this.sku_price.length > 0
        }
    },
	created: function() {
		
		this.getBaseInfo()
		
	},
	
    methods: {
        preview () {
            ImagePreview({
                images: this.imgList,
                startPosition: 1,
            });
        },
		getBaseInfo:function(){
			const that = this
			that.goods_id=that.$route.query.id
			that.goods_type=that.$route.query.type
			
			that.$goods.getGoodsDetail(that.goods_id,that.goods_type).then(function(res){
				const data = res.data||{}
				that.detail = data.detail||[]
				that.merchant = data.mch_info||[]
				that.imgList = data.detail.img ||[]
				if (data.detail.sku_price.length > 0) {
                    // that.suk_id = data.detail.sku_price[0].id
                    that.suk_id = 0
                    that.sku_price = data.detail.sku_price
                }
				
			})
		},
		addCart () {
            if (this.isSku && this.detail.sku_price[this.suk_id].stock <= 0 ) {
                return this.$toast('库存不足')
            } else {
                if (this.detail.stock <= 0) return this.$toast('库存不足')
            }
            const goodsItem = {
                goods_id: this.detail.id,
                sku_id: (this.isSku && this.detail.sku_price[this.suk_id].id) || 0, // sku_id
                num: this.count
            }
            // console.log(goodsItem)
            this.$goods.addCart(goodsItem).then(() => {
                this.show = false
                this.$toast('加入购物车成功')
            })
        },
        // 收藏 取消收藏
        Coll (key) {
            this.$goods.goodsColl([{ goods_id: this.detail.id }], key).then(() => {
                this.$toast(key === 1 ? '商品已加入收藏夹' : '商品已从收藏夹移除')
                this.detail.is_coll = key
            })
        },
        buy () {
            if (this.isSku && this.detail.sku_price[this.suk_id].stock <= 0 ) {
                return this.$toast('库存不足')
            } else {
                if (this.detail.stock <= 0) return this.$toast('库存不足')
            }
            this.$router.push(`/checkout?channel=buy&goods_id=${this.detail.id}&sku_id=${this.suk_id}&count=${this.count}`)
        }
    }
}
</script>

<style lang="less" scoped>
.details {
    overflow-y: auto;
    padding-bottom: 60px;
}
.my-swip {
    min-height: 292px;
    height: 292px;
    width: 100%;
    background-color: #fff;
    .img-box {
        img {
            height: 292px;
            object-fit: cover;
        }
    }
}

.header {
    display: flex;
    align-items: center;
}
.plr {
    padding: 0 15px;
}

.goods-msg {
    .goods_sku {
        color: #525252;
        li {
            margin: 6px 0;
        }
    }
}
.sku_item {
    padding: 0 10px;
    border: 1px solid #eaeaea;
    margin-right: 10px;
}
.sku_item.active {
    border-color: @priceColor;
    color: @priceColor;
}
.coupon {
    padding: 2px 10px;
    background-color: #fff6f4;
    color: @priceColor;
}

.shop {
    height: 200px;
}

.head {
    background-color: #eaeaea;
    line-height: 30px;
    text-align: left;
    padding-left: 10px;
}
</style>
